<template>
  <div class="page">
    <div class="bannerbtn">shang</div>
    <div class="photoPanel">
      <transition>
      <ul class="photoList" >
        <li v-for="item in imgList"><img :src="item.src" /></li>
      </ul>
      </transition>
    </div>
    <div class="bannerbtn">xia</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        timer:null,
        curIndex: 0,
        imgList: [
          {src:require('../../assets/img/5.jpg')},
          {src:require('../../assets/img/6.jpg')},
          {src:require('../../assets/img/1.jpg')},
          {src:require('../../assets/img/2.jpg')},
          {src:require('../../assets/img/3.jpg')},
          {src:require('../../assets/img/4.jpg')},
          {src:require('../../assets/img/5.jpg')},
          {src:require('../../assets/img/6.jpg')},
          {src:require('../../assets/img/1.jpg')},
          {src:require('../../assets/img/2.jpg')},
        ],
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        this.start();
      },
      start(){
        this.timer=setInterval(()=>{
          this.run('top');
        },1000);
      },
      stop(){
        clearInterval(this.timer);
      },
      run(type='top'){
        if(type=='top'){
          //splice(0,1)
          var moveImg=this.imgList.shift();
          this.imgList.push(moveImg);
        }
        if(type=='bottom'){
          //const length=this.imgList.length;
          const moveImg=this.imgList.pop();
          this.imgList.unshift(moveImg);
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .photoPanel{
    overflow: hidden;
    .photoList{
      height: 100%;
      width: 300px;
      margin-top:-270px;
      li{
        list-style: none;
        margin: 5px auto;
        width: 240px;
        height: 120px;
        border: 4px solid #ffffff;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }

</style>
